<!--
 * @Author: shawnXiao
 * @Date: 2021-12-27 10:28:05
 * @LastEditTime: 2021-12-27 13:58:46
 * @FilePath: /vite2-vue3-typescript/src/views/FlowChart/index.vue
-->
<template>
  <div id="container"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'
import { Control, DndPanel } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'
export default defineComponent({
  name: 'FlowChart',
  components: {},
  setup() {
    const data = {
      // 节点
      nodes: [
        {
          id: 21,
          type: 'rect',
          x: 100,
          y: 200,
          text: {
            value: '矩形节点',
            x: 100,
            y: 200,
          },
        },
        {
          id: 50,
          type: 'circle',
          x: 300,
          y: 400,
          text: {
            value: '圆形节点',
            x: 300,
            y: 400,
          },
        },
      ],
      // 边
      edges: [
        {
          type: 'polyline',
          sourceNodeId: 50,
          targetNodeId: 21,
        },
      ],
    }
    onMounted(() => {
      init()
    })
    const init = () => {
      LogicFlowRender()
    }
    const LogicFlowRender = () => {
      LogicFlow.use(Control)
      LogicFlow.use(DndPanel)
      // 创建一个 LogicFlow 的实例
      const lf = new LogicFlow({
        container: document.querySelector('#container') as any,
        stopScrollGraph: true,
        stopZoomGraph: true,
        width: 1200,
        height: 500,
        grid: {
          type: 'dot',
          size: 20,
        },
      })
      // 渲染画布
      lf.render(data)
    }
    return {}
  },
})
</script>
